<template>
  <a-modal
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleOk"
    :width="width"
  >
    <div>

      <a-form :form="form" :label-col="{ span: 5,offset:1 }" :wrapper-col="{ span: 12 }" labelAlign="left">
        <template v-for="item in list" v-if="type != 'table'">
          <a-form-item :label="item.label">
            {{item.value}}
          </a-form-item>
        </template>
        <template v-if="type == 'table'">
          <a-row style="margin-bottom: 20px" v-if="needsearch">
            <a-col :span="4">
              <a-input placeholder="请输入漏洞名称" v-model="search"/>
            </a-col>
            <a-col :span="3" :offset="1">
              <a-button type="primary" @click="searchlist()">查询</a-button>
            </a-col>
          </a-row>
          <a-table :columns="columns" :data-source="data"  :pagination="tablepagination2"  @change="tablechange">
            <template slot="affectPackages" slot-scope="text, record">
              <a-tag style="margin-bottom: 10px" v-for="item in text"  color="blue">{{item.name}} 修复版本:{{item.fixedIn}}</a-tag>
            </template>

            <template slot="failed" slot-scope="text, record">
              {{JSON.stringify(text)}}
            </template>
            <template slot="unreachable" slot-scope="text, record">
              {{JSON.stringify(text)}}
            </template>
          </a-table>
        </template>
      </a-form>
    </div>
  </a-modal>
</template>

<script>
  import TreeSelect from 'ant-design-vue/es/tree-select'
  import {getPolicyLog} from '@/api/log'
  import moment from 'moment'
  export default {
    name: 'mymodal',
    components: { TreeSelect },
    data(){
      return{
        visible:false,
        title:'',
        list:[],
        form: this.$form.createForm(this, { name: 'mymodal' }),
        okfunc:null,
        moreinfo:{},
        ipinput:{},
        ipjson:{},
        type:'',
        data:[],
        columns:[],
        width:800,
        tablepagination2:{
          showTotal:(total, range) => {
            return `共搜索到${total}条数据`
          },
          current:0,
          total:0
        },
        query:null,
        params:{},
        needsearch:false,
        search:''
      }
    },
    methods:{
      resetmodal(){
        this.title = ''
        this.list = []
        this.okfunc = null
        this.type = ''
        this.data = []
        this.columns = []
        this.tablepagination2 = {
          showTotal:(total, range) => {
            return `共搜索到${total}条数据`
          },
          current:0,
          total:0
        },
        this.query = null
        this.params = {}
        this.needsearch = false
        this.search = ''
      },
      showmodal(modalinfo){
        this.form.resetFields()
        this.resetmodal()
        if(modalinfo){
          this.title = modalinfo.title
          this.list = modalinfo.list
          this.okfunc = modalinfo.ok
          this.moreinfo = modalinfo.moreinfo
          this.type = modalinfo.type
          this.data = modalinfo.data
          let colum = []
          for(let i in this.list){
            let j =  {
                title: this.list[i].label,
                dataIndex: this.list[i].value,
                key: this.list[i].value,
              }
            if( this.list[i].width){
              j.width = this.list[i].width
            }
              if( this.list[i].value == 'affectPackages'){
                j.scopedSlots = { customRender: 'affectPackages' }
              }

            if( this.list[i].value == 'failed'){
              j.scopedSlots = { customRender: 'failed' }
            }

            if( this.list[i].value == 'unreachable'){
              j.scopedSlots = { customRender: 'unreachable' }
            }

            if( this.list[i].value == 'caozuo'){
              j.scopedSlots = { customRender: 'caozuo' }
            }
              colum.push(j)
          }
          this.columns = colum
          if(modalinfo.width){
            this.width = modalinfo.width
          }
          if(modalinfo.nopage){
            this.tablepagination2 = false
          }
          if(modalinfo.query){
            this.query = modalinfo.query
            this.params = modalinfo.params
            this.params.pageNo = this.tablepagination2.current
            this.params.pageSize = 10
            this.params.search = this.search
            this.query(this.params).then(res=>{
              let record = res.data.records
              let data = []
              let index = 0
              for(let i in record){
                if(record[i].result){
                  for(let j in record[i].result){
                    index++
                    let json = {}
                    json.strategy_name = record[i].strategy_name
                    json.key = index
                    json.name = record[i].result[j].name
                    json.time = moment(new Date(record[i].timestamp*1000)).format('YYYY-MM-DD HH:mm:ss')
                    json.counts_fail = record[i].result[j].result.counts_fail
                    json.counts_success = record[i].result[j].result.counts_success
                    json.counts_unreachable = record[i].result[j].result.counts_unreachable
                    json.failed = JSON.stringify(record[i].result[j].result.failed)
                    json.unreachable = JSON.stringify(record[i].result[j].result.unreachable)
                    data.push(json)
                  }
                }else{
                  if(record[i].affectPackages) record[i].affectPackages = JSON.parse(record[i].affectPackages)
                  if(record[i].utime) record[i].utime = record[i].utime.replace('T',' ')
                  record[i].key =record[i].id
                  data.push(record[i])
                }
              }
              this.tablepagination2.total = res.data.total
              this.data = data
            })
          }
          this.needsearch = modalinfo.search
        }

        this.visible = true

        // setTimeout(()=>{
        //   for(let i in modalinfo.list){
        //     if(modalinfo.list[i].value){
        //       let key = modalinfo.list[i].name
        //       let val = modalinfo.list[i].value
        //       let j = {}
        //       j[key] = val
        //       this.form.setFieldsValue(j)
        //     }
        //
        //
        //   }
        // },0)

      },
      searchlist(){
        this.tablepagination2.current = 1
        this.params.pageNo = this.tablepagination2.current
        this.params.pageSize = 10
        this.params.search = this.search
        this.query(this.params).then(res=>{
          let record = res.data.records
          for(let i in record){
            if(record[i].affectPackages) record[i].affectPackages = JSON.parse(record[i].affectPackages)
            if(record[i].utime) record[i].utime = record[i].utime.replace('T',' ')
            record[i].key =record[i].id
          }
          this.tablepagination2.total = res.data.total
          this.data = record
        })
      },
      handleOk(){
        this.visible = false
      },
      tablechange(pagination){
        this.tablepagination2 = pagination

        this.params.pageNo = this.tablepagination2.current
        this.params.pageSize = 10
        this.params.search = this.search
        this.query(this.params).then(res=>{
          let record = res.data.records
          for(let i in record){
            if(record[i].affectPackages) record[i].affectPackages = JSON.parse(record[i].affectPackages)
            if(record[i].utime) record[i].utime = record[i].utime.replace('T',' ')
            record[i].key =record[i].id
          }
          this.tablepagination2.total = res.data.total
          this.data = record
        })
      }
    }
  }
</script>

<style lang="less">
  @import "~ant-design-vue/es/tree-select/style/index.less";

  .iplist{
    border: 1px solid #ddd;
    padding: 5px;
    min-height: 100px;
    line-height: 30px;
    div:hover{
      background-color: #efefef;
    }
    .icon{
      color: red;
      cursor: pointer;
      line-height: 30px;
      float: right;
      margin-right: 20px;
    }
  }
</style>